<template>
  <!-- <kda-editor style="height: 700px" :basic-fields="['Text']" :layout-fields="['grid']"> </kda-editor> -->
  <div class="main-container">
    <kda-editor class="kda-editor" @save="onSave" ref="kadEditerRef" :menu="menu" :panel="panel">
    </kda-editor>
    <!-- <div class="btnlist">
      <el-button @click="goSave" type="primary">保存</el-button>
      <el-button @click="setJson" type="primary">自定义json</el-button>
      <el-button @click="goPreview" type="primary"> 表单预览 </el-button>
    </div> -->
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";
import Store from "../Server";
export default defineComponent({
  name: "App",
  setup() {
    const kadEditerRef = ref();
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const menu = ref({
      left: [],
      right: [],
      column: false,//扩展列：缩放、快捷键
    });
    const panel = ref(["form", "json", "global"]);
    return {
      kadEditerRef,
      menu,
      panel,
      goPreview() {
        proxy?.$router.push("/about");
      },
      onSave(res: any[]) {
        Store.set("allFormList", res);
      },
      goSave() {
        kadEditerRef.value.getJson();
      },
      setJson() {
        kadEditerRef.value.setJson([
          {
            ControlType: "Text",
            nameCn: "文本框",
            id: "fPgb7Xb_w6HXixCAyA4k4",
            layout: false,
            data: {
              fieldName: "Text_n6SZkfztwMLHMr1A0GX5B",
              label: "标签名称",
              tip: "",
              placeholder: "",
              showRule: "{}",
              required: false,
              rule: "[]",
              default: "",
            },
          },
        ]);
      },
    };
  },
});
</script>
<style lang="scss">
.main-container {
  width: 100%;
  height: 100%;
  position: relative;

  // .kda-editor {
  //   border: 1px solid rgb(190, 186, 186);
  // }
  .btnlist {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid rgb(190, 186, 186);
    background: white;
    padding: 10px 0;
    z-index: 1;
    display: flex;
    justify-content: center;
  }
}
</style>
